<template>
  <div class="my-tag" @dblclick='open'>
    <!-- v-if实现输入框显示隐藏功能，v-focus实现自动获得焦点，v-model.trim拿到输入框数据，keydown.ente和blur事件触发执行close函数 -->
    <input
      v-if="edital"
      class="input"
      type="text"
      v-focus
      placeholder="输入标签"
      @keydown.enter="close"
      @blur="close"
      v-model.trim="tag"
    />
    <div class="text" v-else>{{value}}</div>
  </div>
</template>
<script>
export default {
  // 利用v-model双向绑定特点，接受主组件调用MyTag时传入的标签数据
  props:{
    value:String
  },
  // 自定义一个指令，来实现自动获得焦点
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    }
  },
  data() {
    return {
      // 定义一个edital布尔类型，来实现输入框显示隐藏
      edital: false,
      // 给一个初始化标签数据
      tag:''
    };
  },
  methods:{
    // 双击事件调用open函数，实现显示输入框，同时数据回显
    open(){
      this.edital=true
      this.tag=this.value
    },
    // 失去光标事件，回车键事件调用close函数，实现输入框隐藏，同时标签数据传给主组件，达到标签整体数据更改
    close(){
      this.edital=false
      if (this.tag==='') {
        this.tag='没有'
      }
      // 利用v-model特性来传输数据
      this.$emit('input', this.tag);
    }
  }
}
</script>

<style lang="less">
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>